<!DOCTYPE html>
<html lang="en">

<head>

  <title>重置密码</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <link rel="stylesheet" href="layui/css/layui.css">

  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="bootstrap/js/jquery-cookie/jquery.cookie.js"></script>

  <script src="angularjs/angular.min.js"></script>
  <script src="angularjs/pagination.js"></script>
  <script type="text/javascript" src="layui/layui.all.js"></script>
  <script>
      var index = 0;
      var app = angular.module("myapp",[]);
      app.controller("myamend",function ($scope,$http) {
          //点击获取验证码通过angularjs发送请求调用接口获取验证码
          $scope.check4=function () {
              alert("默认的验证码是123456");
              // 发送验证码
              $http.get("users/user/sendCode?userphone="+$scope.userphone).success(function (data) {
                  layer.msg("验证码发送成功,有效期为1分钟",{icon:6});
              });
          };

          //修改验证用户输入的验证码是否是正确
          $scope.check5=function () {
              var useruphone = document.getElementById('useruphone').value;
              var userupwd = document.getElementById('userupwd').value;
              var userupwd2 = document.getElementById('userupwd2').value;
              var usercode = document.getElementById('usercode').value;
              index = -1;

              if (useruphone==""){
                  layer.tips("手机号码不能为空", "#useruphone", {tips: [3, "blue"], time: 1500});
                  return false;
              }
              if (userupwd==""){
                  layer.tips("密码不能为空", "#userupwd", {tips: [3, "blue"], time: 1500});
                  return false;
              }
              if(userupwd2==""){
                  layer.tips("请您再次确认密码", "#userupwd2", {tips: [3, "blue"], time: 1500});
                  return false;
              }
              if(userupwd != userupwd2){
                  layer.msg("两次密码不一样,请重新输入!!!",{icon:5});
                  document.getElementById('userupwd2').value=null;
                  return false;
              }
              if (usercode==""){
                  layer.tips("验证码不能为空", "#usercode", {tips: [3, "blue"], time: 1500});
                  return false;
              }
              //正则表达式判断密码格式是否正确
              if(!(/^[0-9A-Za-z]{8,20}$/.test(userupwd))){
                  layer.msg("请输入合法的8-20密码",{icon:5});
                  document.getElementById('userupwd').value=null;
                  return false;
              }

              $http.get("users/user/resetPassword?userphone="+$scope.userphone+"&userupwd="+$scope.userupwd+"&usercode="+$scope.usercode).success(function (data) {
                  if (data.code!=200){
                      layer.msg("手机号或验证码错误, 请重新输入", {icon: 2});
                      setTimeout(function () {location.href="password.html";}, 800);
                  } else {
                      layer.msg("重置密码成功", {icon: 1});
                      setTimeout(function () {location.href="login.html";}, 800);
                  }
              })
          }
      });

      // //正则表达式判断手机号码是否正确
      function checkPhone() {
          var useruphone = document.getElementById('useruphone').value;
          if(!(/^1[3456789]\d{9}$/.test(useruphone))){
              layer.msg("请输入正确的手机号", {icon: 0});
              return false;
          }
      }
      function showErrorInfo(msg) {
          if(index != -1) {
              index = layer.msg(msg,{icon:5});
          }
          index = 1;
      }

      $(function(){

          $("#userupwd").blur(function () {
              if(!(/^[0-9A-Za-z]{8,20}$/.test($(this).val()))){
                  setTimeout("showErrorInfo('请输入合法的8-20密码')",500);
              }
          });
          $("#userupwd2").blur(function () {
              if($(this).val() == "") {
                  return;
              }
              if($("#userupwd2").val() != $("#userupwd").val()) {
                  setTimeout("showErrorInfo('两次密码不一致')",500);
              }
          });
      });

      app.controller('resetPasswordCtrl', function($scope, $interval){
          $scope.initTime = false;
          $scope.timeoutValue = 60000;
      });

      app.directive('timerButton', function($timeout, $interval){
          return {
              restrict: 'AE',
              scope: {
                  showTimer: '=',
                  timeout: '='
              },
              link: function(scope, element, attrs){
                  scope.timer = false;
                  scope.timerCount = scope.timeout / 1000;
                  scope.text = "验证码为123456";
                  scope.onClick = function(){
                      scope.showTimer = true;
                      scope.timer = true;
                      scope.text = 's';
                      var counter = $interval(function(){
                          if(scope.timerCount > 0) {
                              scope.timerCount = scope.timerCount - 1;
                          }else {
                              scope.timerCount = '';
                          }
                      }, 1000);
                      $timeout(function(){
                          scope.text = "获取验证码";
                          scope.timer = false;
                          $interval.cancel(counter);
                          scope.showTimer = false;
                          scope.timerCount = scope.timeout / 1000;
                      }, scope.timeout);
                  }
              },
              template: '<button ng-click="onClick()" class="btn btn-primary btn-br20px" ng-disabled="timer"><span ng-show="showTimer">重新获取({{ timerCount }}</span>{{text}}<span ng-show="showTimer">)</span></button>'
          };
      });
  </script>
  <style>
    .container {
      padding-top: 50px;
    }
    form.user .form-control-user {
      font-size: 1rem;
    }
    form.user .btn-user {
      font-size: 1rem;
    }
    .btn-br20px {
      border-radius: 25px;
      width: 100%;
      height: 50px
    }
  </style>
</head>
<body class="bg-gradient-primary" ng-app="myapp" ng-controller="myamend" >

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 col-lg-12 col-md-9">
        <div class="card o-hidden border-0 shadow-lg my-5">
          <div class="card-body p-0">
            <div class="row">
              <div class="col-lg-6 d-none d-lg-block"><img src="img/reset.jpg" style="width: 100%;height: 100%"></div>
              <div class="col-lg-6">
                <div class="p-5">
                  <div class="text-center">
                    <h1 class="h4 text-gray-900 mb-2" style="font-weight: bolder" >重置密码</h1>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                  </div>
                  <form class="user" >
                    <div class="form-group">
                      <input  class="form-control form-control-user" id="useruphone"  aria-describedby="emailHelp" ng-model="userphone" placeholder="请输入您的手机号" onblur="checkPhone()">
                    </div>
                    <div class="form-group">
                      <input  class="form-control form-control-user" type="password" id="userupwd" ng-model="userupwd" aria-describedby="emailHelp" placeholder="请输入修改的8-20位密码(字母加数字)" >
                    </div>
                    <div class="form-group">
                      <input  class="form-control form-control-user" type="password"  id="userupwd2" ng-model="userupwd2" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="确认您修改的密码" >
                    </div>
                    <div class="form-group row">
                      <div class="col-sm-6 mb-3 mb-sm-0">
                        <input type="text" id="usercode" ng-model="usercode" class="form-control form-control-user" maxlength="6" name="phoneYz" autocomplete="off"  placeholder="请输入验证码" >
                      </div>
                      <div class="form-group col-sm-6 text-right" ng-controller="resetPasswordCtrl" >
                        <timer-button class="btn-br20px" show-timer="initTime" ng-click="check4()" timeout="timeoutValue" id="eee">获取验证码</timer-button>
                      </div>
                    </div>
                    <button class="btn btn-primary btn-user btn-block" ng-click="check5()" >
                      重置密码
                    </button>
                  </form>
                  <hr>
                  <div>
                    <a style="float: left" href="login.html">已有账号去登录</a><a style="float: right" href="register.html">重新注册</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="text-right text-gray-600">金证证券在线交易中心</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>